/
 * 店铺管理
 */
<template>
  <div class="Goods">
    <div class="main" style="border-radius: 5px">
      <!--列表-->
      <div class="banManage">
        <span class="classification">轮播图管理</span>
        <el-button class="newbanner" type="primary" @click="handleEdit()"
          >新增轮播</el-button
        >
      </div>
      <div class="tableBox">
        <el-table
          :data="listData"
          size="small"
          v-loading="loading"
          element-loading-text="拼命加载中"
          height="70vh"
          style="width: 100%"
          :header-cell-style="{
            color: '#3D3D3D',
            'font-size': '16px',
            height: '60px',
            'font-weight': '400',
            'background-color': '#F8F9FB',
            'border-bottom': 'none',
          }"
          class="customer-table"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="200%"
            align="center"
          ></el-table-column
          ><!-- type="index" -->
          <el-table-column
            prop="name"
            label="名称"
            main-width="16%"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="image"
            label="图片"
            main-width="19%"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: block">
                <el-image
                  :src="scope.row.image"
                  :preview-src-list="[scope.row.image]"
                  :key="scope.row.id"
                  style="
                    margin: 0 auto;
                    display: block;
                    height: 59px;
                    line-height: 59px;
                  "
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="是否隐藏"
            main-width="16%"
            align="center"
            property="value"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_show"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                inactive-color="#C1C1C1"
                @change="changeStatus(scope.row, scope.$index)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            main-width="16%"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" main-width="16%" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="font-size: 0.875rem; color: #436af2"
                @click="handleEdits(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                style="font-size: 0.875rem; color: #436af2"
                @click="deleteUser(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editFormVisible" width="510px" :title="title">
          <div class="navBox">
            <el-form
              label-width="80px"
              :model="formList"
              :rules="rules"
              ref="formList"
              ><!-- :model="formList"表单数据对象 -->
              <el-form-item label="名称" prop="name">
                <!-- <span class="solid"></span> -->
                <el-input
                  placeholder="请输入名称"
                  v-model="formList.name"
                  maxlength="15"
                  show-word-limit
                  type="text"
                ></el-input>
              </el-form-item>
              <el-form-item label="序号" prop="id">
                <!-- <span class="solid"></span> -->
                <el-input
                  placeholder="请输入序号"
                  v-model="formList.id"
                  type="text"
                ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload
                  style="overflow: hidden"
                  class="avatar-uploader"
                  action="http://cms_lyqswl_com/Admin.php/index/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  accept="image/*"
                >
                  <img v-if="image" :src="image" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span
                  style="
                    font-size: 12px;
                    color: #666666;
                    font-weight: 400;
                    line-height: 20px;
                    text-align: left;
                    padding: 0;
                    float: right;
                    width: 55%;
                    height: 50px;
                    padding-top: 45px;
                  "
                  >尺寸建议在800*800像素以上， 大小2M以下</span
                >
                <!-- action必选参数上传的地址 -->
                <!-- :show-file-list="false" 不显示已上传文件列表 -->
              </el-form-item>
              <el-form-item label="状态">
                <div class="stateButton">
                  <el-row class="stateText">
                    <form
                      name="my_form"
                      method="POST"
                      style="
                        line-height: 50px;
                        display: flex;
                        align-items:center
                      "
                    >
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question2"
                        value="0"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          
                          margin-right: 5px;
                          margin-left: 10px;
                        "
                      /><span>显示</span>
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question2"
                        value="1"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-left: 15px;
                          
                          margin-right: 5px;
                        "
                      /><span>隐藏</span>
                    </form>
                  </el-row>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              @click="closeDialogs()"
              style="
                width: 100px;
                height: 38px;
                font-size: 0.875rem;
                border-radius: 5px;
              "
              >取 消</el-button
            >
            <el-button
              @click="submitForms('formList')"
              style="
                width: 100px;
                height: 38px;
                background-color: #436af2;
                color: #fff;
                font-size: 0.875rem;
                border-radius: 5px;
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <!-- //新增轮播 -->
        <el-dialog :visible.sync="newBanner" width="510px" :title="title">
          <div class="navBox">
            <el-form
              label-width="80px"
              :model="formList"
              :rules="rules"
              ref="formList"
              ><!-- :model="formList"表单数据对象 -->
              <el-form-item label="名称" prop="name">
                <!-- <span class="solid"></span> -->
                <el-input
                  placeholder="请输入名称"
                  v-model="formList.name"
                  maxlength="15"
                  show-word-limit
                  type="text"
                ></el-input>
              </el-form-item>
              <el-form-item label="序号" prop="id">
                <!-- <span class="solid"></span> -->
                <el-input
                  placeholder="请输入序号"
                  v-model="formList.id"
                  type="text"
                ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload
                  style="overflow: hidden"
                  class="avatar-uploader"
                  action="http://cms_lyqswl_com/Admin.php/index/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  accept="image/*"
                >
                  <img v-if="image" :src="image" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span
                  style="
                    font-size: 12px;
                    color: #666666;
                    font-weight: 400;
                    line-height: 20px;
                    text-align: left;
                    padding: 0;
                    float: right;
                    width: 55%;
                    height: 50px;
                    padding-top: 45px;
                  "
                  >尺寸建议在800*800像素以上， 大小2M以下</span
                >

                <!-- action必选参数上传的地址 -->
                <!-- :show-file-list="false" 不显示已上传文件列表 -->
              </el-form-item>
              <el-form-item label="状态">
                <div class="stateButton">
                  <el-row class="stateText">
                    <form
                      name="my_form"
                      method="POST"
                      style="
                        line-height: 50px;
                        display: flex;
                        align-items:center
                        line-height: 50px;
                      "
                    >
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question1"
                        value="0"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          
                          margin-right: 5px;
                          margin-left: 10px;
                        "
                      /><span>显示</span>
                      <input
                        type="radio"
                        v-model="radioVal"
                        name="question1"
                        value="1"
                        @change="getRadioVal"
                        style="
                          width: 18px;
                          height: 18px;
                          margin-left: 15px;
                          
                          margin-right: 5px;
                        "
                      /><span>隐藏</span>
                    </form>
                  </el-row>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              @click="closeDialog()"
              style="
                width: 100px;
                height: 38px;
                font-size: 0.875rem;
                border-radius: 5px;
              "
              >取 消</el-button
            >
            <el-button
              @click="submitForm()"
              style="
                width: 100px;
                height: 38px;
                background-color: #436af2;
                color: #fff;
                font-size: 0.875rem;
                border-radius: 5px;
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
        style="
          margin: 0 auto;
          width: 33%;
          margin-top: 45px;
          padding-bottom: 20px;
        "
      ></Pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "../../components/Pagination";
export default {
  // 注册组件
  components: {
    Pagination,
  },
  data() {
    return {
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 20,
      },
      disableds: false,
      radioVal: "",
      img_url: "", //显示的图片地址
      radioVal: "0",
      newBanner: false,
      title: "添加",
      listData: [],
      editFormVisible: false, //控制编辑页面显示与隐藏
      loading: false,
      data: "",
      image: "",
      name: "",
      id: "",
      //表单数据对象
      formList: {
        id: "",
        name: "",
        image: "",
        is_show: "",
      },
      //rules表单验证
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        id: [{ required: true, message: "请输入序号", trigger: "blur" }],
        image: [{ required: true, message: "请选择图片", trigger: "blur" }],
      },
    };
  },
  // 注册组件

  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    //轮播开关 点击显示隐藏传给后端
    changeStatus(row, index) {
      this.$axios({
        url: "/index/lunbotu_yin",
        methods: "post",
        params: {
          id: row.id,
          is_show: row.is_show,
        },
      }).then((res) => {});
    },
    getRadioVal() {},
    //获取公司列表
    getdata() {
      this.loading = true;
      this.$axios({
        method: "post",
        url: "/index/lunbotu",
        // params: {
        //   p: this.currentPage,
        // },
      })
        .then((res) => {
          this.loading = false;
          let data = res.data.data;
          this.listData = res.data.data;
          // if (data.length < 20) {
          //   this.disableds = true;
          // } else {
          //   this.disableds = false;
          // }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    //显示新增界面
    handleEdit: function () {
      this.newBanner = true;
      this.title = "添加轮播图";
      this.formList.id = "";
      this.formList.name = "";
      this.image = "";
    },
    //显示编辑界面
    handleEdits: function (index, row) {
      this.editFormVisible = true;
      this.title = "编辑轮播图";
      this.formList.id = row.id;
      this.formList.name = row.name;
      this.image = row.image;
      this.radioVal = row.is_show;
    },
    //新增确定保存
    submitForm() {
      if (this.formList.name == "" || this.date == "") {
        this.$message({
          type: "error",
          message: "请填完必输选项进行操作！",
        });
      } else {
        this.$axios({
          method: "post",
          url: "/index/lunbotu_add",
          params: {
            id: this.formList.id,
            name: this.formList.name,
            image: "http://cms_lyqswl_com" + this.date,
            is_show: this.radioVal,
          },
        }).then((res) => {
          if (res.data.status == 1) {
            var res = JSON.parse(localStorage.getItem("userdata"));
            // if(this.userdata==''){
            //   this.$message({
            //         type:"err",
            //         message:"请先登录"
            //       })
            //    setTimeout(() => {
            //       this.$router.push({ path: '/login/login' })
            //    },1000)
            // }
            this.getdata();
            this.$message({
              type: "success",
              message: "添加成功！",
            });
          } else {
            this.$message({
              type: "err",
              message: "添加失败！",
            });
          }

          this.newBanner = false;
        });
      }
    },
    //编辑确定保存
    submitForms(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/index/lunbotu_save",
            params: {
              name: this.formList.name,
              id: this.formList.id,
              image: "http://cms_lyqswl_com" + this.date,
              is_show: this.radioVal,
            },
          }).then((res) => {
            this.getdata();
            this.editFormVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    //删除
    deleteUser(index, row) {
      this.$confirm("确定要删除轮播图吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "post",
            url: "/index/lunbotu_del",
            params: {
              id: row.id,
            },
          }).then((res) => {
            if (res.status) {
              this.getdata();
              this.$message({
                type: "success",
                message: "删除成功",
              });
              // this.getdata(this.formList)
            }
          });
        })
        .catch((err) => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    //新增轮播图取消
    closeDialog() {
      this.newBanner = false;
    },
    //编辑取消
    closeDialogs() {
      this.editFormVisible = false;
    },
    handleAvatarSuccess(res, file) {
      this.image = URL.createObjectURL(file.raw);
      this.date = res.data;
    },
    //隔行换色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
<style scoped>
.Goods /deep/ .el-table .warning-row {
  background: #f8f9fb !important;
}
.Goods /deep/ .el-table .success-row {
  background: white !important;
}
.Goods /deep/ .el-dialog__body {
  padding: 0px 26px;
}
.banManage {
  background-color: #fff;
  padding: 0 20px;
  overflow: hidden;
  line-height: 65px;
}
.banManage .classification {
  font-size: 1rem;
  font-weight: bold;
  color: #3d3d3d;
}
.banManage .newbanner {
  float: right;
  width: 100px;
  height: 38px;
  background: #436af2;
  border-radius: 5px;
  font-size: 0.875rem;
  margin-top: 0.875rem;
}
.userRole {
  width: 100%;
}
.Goods /deep/ .el-form-item__content .el-input__inner {
  width: 210px;
  font-size: 0.875rem;
  margin-top: 5px;
  border: none;
  height: 30px;
  line-height: 30px;
}
.Goods /deep/ .el-form-item__content {
  margin-left: 100px;
}
.customer-table {
  border: none;
}
/* .customer-table th, tr,td{border:none} */
.main {
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
}
.tableBox {
  background-color: #fafafa;
}
.navBox {
  margin: 0 auto;
  width: 85%;
  box-sizing: border-box;
}
.el-form-item__content .el-input {
  width: 92%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  color: #3e3e3e;
  font-size: 18px;
  font-weight: inherit;
  text-indent: 0.5em;
  margin-left: 3%;
}
.Goods /deep/ .el-dialog {
  border-radius: 10px;
}
/* 圆角红点  弹框 */
.Goods /deep/ .el-form-item__label {
  color: #8a8989;
  font-size: 0.875rem;
  line-height: 48px;
  height: 40px;
}
.avatar-uploader {
  width: 109px;
  display: inline-block;
  margin-left: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload {
  text-align: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 85px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  border: 1px dashed #888888;
}
.avatar {
  width: 85px;
  height: 85px;
  display: inline-block;
}
.stateText {
  overflow: hidden;
  display: flex;
  width: 260px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #3d3d3d;
}
.Goods /deep/ .stateButton .el-button {
  background-color: #e5e5e5;
  color: #fff;
  width: 30px;
  height: 30px;
  margin-top: 5px;
}

.Goods /deep/ .stateButton .el-button:focus,
.stateButton .el-button:hover {
  background-color: #436af2;
  border: 1px solid #436af2;
  color: #fff;
}
.Goods /deep/ .el-input .el-input__count {
  font-size: 14px;
  padding-right: 10px;
}
.dialog-footer {
  display: flex;
  width: 60%;
  margin: 0 auto;
  justify-content: space-between;
  padding-bottom: 20px;
}
.Goods /deep/ .el-dialog__title {
  font-size: 16px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 80px;
  padding-left: 40px;
}
.Goods /deep/ .el-form-item {
  margin-bottom: 18px;
}
.img_container {
  height: auto;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.img_container .pirect {
  font-size: 18px;
  width: 88px;
  text-align: right;
}
.img_container .pirect span {
  margin-left: 16%;
  display: inline-block;
}
.img_container .contents {
  width: 150px;
  font-size: 12px;
  color: #666666;
  margin-left: 2%;
  height: 35px;
  margin-top: 60px;
}

.img_container li {
  width: 107px;
  height: 107px;
  box-sizing: border-box;
  border: 1px dashed #3972ff;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-left: 3%;
}

.img_container li > .show_img {
  width: 100%;
  height: 100%;
}
.img_upload {
  text-align: center;
  cursor: pointer;
}
.img_upload img {
  width: 31px;
  height: 31px;
  margin: 24px 0 8px 0;
}
.upload_info {
  font-size: 30px;
  color: #c1c1c1;
  line-height: 100px;
}
.repeat_img {
  position: absolute;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  right: 0;
  top: 24px;
}
.Goods /deep/ .el-table--small .el-table__cell {
  padding: 0.5px 0;
}
.Goods /deep/ .el-table .cell {
  font-size: 0.875rem;
}
.Goods /deep/ .el-table th.el-table__cell > .cell {
  font-size: 15px;
}
.Goods /deep/ .el-image__inner {
  width: auto !important;
  height: 95%;
}
.Goods /deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
</style>